<template>
  <div>
    <FormPanel ref="from" :list="formList" @formChange="changeHandle" :isSubmitBtn="false" :collapse="false" labelWidth="110" />
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :onRowSelectChange="selectChangeHandle"
      :onColumnsChange="columns => this.columns = columns"
    >
      <template slot="controls" slot-scope="props">
        <multiuse-button  size="small" type="primary" @click="addHandle()" icon="el-icon-plus">新 增</multiuse-button>
      </template>
    </FilterTable>
    <BaseDialog
      :visible.sync="isaddCar"
      :title="'新增车辆'"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <selectCar :rowData="formData" @close="emitcloseHandler" />
    </BaseDialog>


    <BaseDialog
      :visible.sync="isProject"
      :title="'选择项目'"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <AccountProject :rowData="formData" @close="emitcloseHandler" />
    </BaseDialog>
    <BaseDialog
      :visible.sync="isOrder"
      :title="'大客户订单信息'"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <AccountProject :rowData="formData" @close="emitcloseHandler" />
    </BaseDialog>
    <div style="height:47px;"></div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDrawer(1)">转订单</el-button>
    </div>
  </div>
</template>
<script>
import AccountProject from './AccountProject'
import selectCar from './selectCar'
import order from './order'
export default {
  data(){
    return{
      formList:this.createdFrom(),
      columns:this.createdTable(),
      fetchParams:{

      },
      fetchApi:()=>{},
      isaddCar:false,
      isProject:false,
      isOrder
    }
  },
  components: {
    AccountProject,
    selectCar,
    order
  },
  methods:{
    createdFrom(){
      return [
        {
          type: 'BREAK_SPACE',
          label: '出卖人信息',
        },
        {
          type: 'INPUT',
          label: '出卖人(甲方)',
          fieldName: 'cmrjf',
          placeholder: '请输入',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        {
          type: 'INPUT',
          label: '住所',
          fieldName: 'zs',
          placeholder: '请输入',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
          selfCols:2
        },
        {
          type: 'INPUT',
          label: '授权代表人',
          fieldName: 'sqdb',
          placeholder: '请输入',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        {
          type: 'INPUT',
          label: '联系人',
          fieldName: 'lxr',
          placeholder: '请输入',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        {
          type: 'INPUT',
          label: '联系方式',
          fieldName: 'lxfs',
          placeholder: '请输入',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        {
          type: 'INPUT',
          label: '工作邮箱',
          fieldName: 'gzyx',
          placeholder: '请输入',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        {
          type: 'BREAK_SPACE',
          label: '买受人信息',
        },
        {
          type: 'INPUT',
          label: '买受人(乙方)',
          fieldName: 'cmrjf',
          placeholder: '请输入',
          rules: [{ required: true, message: '请选择', trigger: 'blur' }],
        },
        {
          type: 'INPUT',
          label: '地址',
          fieldName: 'zs1',
          placeholder: '请输入',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
          selfCols:2
        },
        {
          type: 'INPUT',
          label: '授权代表人',
          fieldName: 'sqdb1',
          placeholder: '请输入',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        {
          type: 'INPUT',
          label: '联系人',
          fieldName: 'lxr1',
          placeholder: '请输入',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        {
          type: 'INPUT',
          label: '联系方式',
          fieldName: 'lxfs1',
          placeholder: '请输入',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        {
          type: 'INPUT',
          label: '工作邮箱',
          fieldName: 'gzyx1',
          placeholder: '请输入',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        {
          type: 'INPUT',
          label: '项目名称',
          fieldName: 'dkhxmmc',
          placeholder: '请选择',
          readonly:true,
          unitRender: () => {
            return (
              <div>
                <el-button icon="el-icon-search" onClick={() => this.seacherFun(2)}></el-button>
              </div>
            );
          },
          rules: [{ required: true, message: '请选择', trigger: 'blur' }],
        },
        {
          type: 'BREAK_SPACE',
          label: '合同信息',
        },
        {
          type: 'INPUT',
          label: '合同名称',
          fieldName: 'htmc',
          placeholder: '请选择',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },

        {
          type: 'INPUT',
          label: '合同编号',
          fieldName: 'htbh',
          placeholder: '请输入',
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        {
          type: 'SELECT',
          label: '资金类型',
          fieldName: 'zjlx',
          placeholder: '请选择',
          itemList:[],
          rules: [{ required: true, message: '请选择', trigger: 'change' }],
        },
        {
          type: 'DATE',
          label: '合同生效日期',
          fieldName: 'htsxrq',
          placeholder: '请选择',
          rules: [{ required: true, message: '请选择', trigger: 'change' }],
        },

        {
          type: 'SELECT',
          label: '交车类型',
          fieldName: 'jclx',
          placeholder: '请选择',
          itemList:[],
          rules: [{ required: true, message: '请选择', trigger: 'change' }],
        },
        {
          type: 'INPUT',
          label: '合同金额',
          fieldName: 'htje',
          placeholder: '请选择',
          disabled:true,
        },
        {
          type: 'INPUT',
          label: '订购总数量',
          fieldName: 'dgzsl',
          placeholder: '请选择',
          disabled:true,
        },
        {
          type: 'SELECT',
          label: '是否赠送充电桩',
          fieldName: 'sfzscdz',
          placeholder: '请选择',
          itemList:[],
          rules: [{ required: true, message: '请选择', trigger: 'change' }],
        },


        {
          type: 'INPUT',
          label: '收车地址',
          fieldName: 'scdz',
          placeholder: '请选择',
          selfCols:2,
          offsetRightCols:1,
          rules: [{ required: true, message: '请输入', trigger: 'blur' }],
        },
        {
          type: 'TEXT_AREA',
          label: '特殊约定',
          fieldName: 'tsyd',
          placeholder: '请选择',
          selfCols:3,
        },

        {
          type: 'BREAK_SPACE',
          label: '车辆信息',
        },
         {
          type: 'UPLOAD_FILE',
          label: '上传附件',
          fieldName: 'scfj',
          placeholder: '请选择',
          initialValue:[]
        },
      ]
    },
    createdTable(){
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 50,
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
                <multiuse-button  size="mini" type="text" onClick={() => this.editHandle(props.row,2)}>
                  编辑
                </multiuse-button>
                <el-divider direction="vertical" />
                <multiuse-button  size="mini" type="text" onClick={() => this.editHandle(props.row,1)}>
                  删除
                </multiuse-button>
              </div>
            );
          }
        },
        {
          title: '收车地址',
          dataIndex: 'scdz',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: (props, h) => {
            return (
              <div>
                <multiuse-button  size="mini" type="text" onClick={() => this.editHandle(props.row,2)}>
                  选择
                </multiuse-button>

              </div>
            )
          }
        },
        {
          title: '品牌',
          dataIndex: 'pp',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '车系',
          dataIndex: 'cx',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '车型',
          dataIndex: 'cxmc',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '配置',
          dataIndex: 'pz',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '内饰',
          dataIndex: 'ns',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '颜色',
          dataIndex: 'ys',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '产品代码',
          dataIndex: 'zcbmms',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '商品名称',
          dataIndex: 'sl',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '生产厂商',
          dataIndex: 'sccs',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '产地',
          dataIndex: 'cd',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '合同数量',
          dataIndex: 'htsl',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '订购数量',
          dataIndex: 'dgsl',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '剩余数量',
          dataIndex: 'sysl',
          sorter: true,
          filter: true,
          filterType: 'input',
          summation:true,
        },
        {
          title: '出厂单价',
          dataIndex: 'ccdj',
          sorter: true,
          filter: true,
          filterType: 'input',
          summation:true,
        },
        {
          title: '包含国家补贴',
          dataIndex: 'bhgjbt',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '商务政策折让',
          dataIndex: 'swzczr',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '扣除补贴，价格折让后单价',
          dataIndex: 'zhdj',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '扣除补贴，价格折让后总价',
          dataIndex: 'zqzje',
          sorter: true,
          filter: true,
          filterType: 'input',
          summation:true,
        },


      ]
    },
    // 新增车辆
    addHandle(){
      this.isaddCar=true
    },
    seacherFun(type){
      if(type==1){
        this.iscontract=true;
      }else if(type==2){
        this.isProject=true;
      }else{
        this.isowner=true;
      }
    },
    changeHandle(val){

    },
    closeDrawer(type){
      this.isOrder=true;
    },
    async editHandle(data,type){
      if(type==1){
        await this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {

      })
      .catch(()=>{})
      }else{
        this.isDiscount=true;
      }
    }
  }
}
</script>
